
// 获取元素
let zoom = document.querySelector('.zoom')
// 遮罩层
let mask = document.querySelector('.mask')
// 左边大盒子图片
let pic = document.querySelector('.pic>img')
// 左边大盒子
let pic1 = document.querySelector('.pic')
let one = document.querySelector('.left>.zoom>ul>li>.one')
let two = document.querySelector('.left>.zoom>ul>li>.two')
let three = document.querySelector('.left>.zoom>ul>li>.three')
let four = document.querySelector('.left>.zoom>ul>li>.four')
let five = document.querySelector('.left>.zoom>ul>li>.five')
// 右边大图片
let magnifier = document.querySelector('.magnifier>img')
// 右边大盒子
let magnifier1 = document.querySelector('.magnifier')
let btn = document.querySelector('.btn')
// console.log(one,two,three,four,five,magnifier)

// 绑定事件
btn.onclick = ()=>{
    location.href = '../html/1-index.html'
}
zoom.addEventListener('mouseover', () => {
    magnifier1.style.display = 'block'
})
zoom.addEventListener('mouseout', () => {
    magnifier1.style.display = 'none'
})
pic1.addEventListener('mouseover', () => {
    magnifier.src = pic.src
    mask.style.display = 'block'
})
pic1.addEventListener('mouseout', () => {
    magnifier.src = pic.src
    mask.style.display = 'none'
})
one.addEventListener('mouseover', () => {
    magnifier.src = one.src
    pic.src = one.src
})
two.addEventListener('mouseover', () => {
    magnifier.src = two.src
    pic.src = two.src
})
three.addEventListener('mouseover', () => {
    magnifier.src = three.src
    pic.src = three.src
})
four.addEventListener('mouseover', () => {
    magnifier.src = four.src
    pic.src = four.src
})
five.addEventListener('mouseover', () => {
    magnifier.src = five.src
    pic.src = five.src
})

// // 绑定鼠标移动事件，遮罩层跟着移动
pic1.addEventListener('mousemove', function (e) {
    // 遮罩层移动的距离 = 鼠标在页面的坐标 - 父盒子在页面的坐标
    let x = (e.clientX - pic1.offsetLeft) - mask.offsetWidth / 2   // 让鼠标居中，需要减去遮罩层自身的一半
    let y = (e.clientY - pic1.offsetTop) - mask.offsetHeight / 2   // 让鼠标居中，需要减去遮罩层自身的一半
    // 限定遮罩层的移动范围，先求出遮罩层的最大移动距离
    let maskxmax = pic1.offsetWidth - mask.offsetWidth   // 最大移动距离 = 父盒子的宽度 - 遮罩层自身的宽度
    let maskymax = pic1.offsetHeight - mask.offsetHeight // 最大移动距离 = 父盒子的高度 - 遮罩层自身的高度
    // 判断
    if (x <= 0) {
        x = 0
    } else if (x >= maskxmax) {
        x = maskxmax
    }
    if (y <= 0) {
        y = 0
    } else if (y >= maskymax) {
        y = maskymax
    }
    mask.style.left = x + 'px'
    mask.style.top = y + 'px'

    // 3、大图片的移动距离=遮罩层的移动距离 / 遮罩层的最大移动距离 * 大图片的最大移动距离
    // 大图的最大移动距离
    let imgmaxX = magnifier.offsetWidth - magnifier1.offsetWidth
    let imgmaxY = magnifier.offsetHeight - magnifier1.offsetHeight
    // 比例
    let num1 = x / maskxmax
    let num2 = y / maskymax
    // 大图片的移动距离
    magnifier.style.left = -num1 * imgmaxX + 'px';
    magnifier.style.top = -num2 * imgmaxY + 'px';
})